<template>
  <!-- 检测数据结果表单弹窗 -->
  <div>
    <el-dialog
      v-model="visibleDialog"
      :title="props.title"
      width="1200px"
      draggable
      @close="closeDialog"
    >
      <el-form ref="formRef" :model="formData" :inline="true" label-width="160">
        <h4 class="mb-[20px] mt-[0px]">基本数据</h4>
        <div>
          <el-row>
            <el-descriptions
              title=""
              :column="3"
              size="large"
              border
              style="width: 100%"
            >
              <el-descriptions-item
                v-for="(item, index) in props.descriptions"
                :key="index"
                :span="item.span"
              >
                <template #label>
                  <div class="cell-item">{{ item.label }}</div>
                </template>
                <span style="width: 50%; word-break: break-all">{{ formData[item.prop] || "" }}</span>
              </el-descriptions-item>
            </el-descriptions>
          </el-row>
        </div>
        <h4 class="mb-[20px] mt-[20px]">详细数据</h4>
        <div class="formTable">
          <el-table
            :data="formData.details"
            style="width: 100%"
            :key="Math.random"
            border
          >
            <el-table-column
              type="index"
              label="序号"
              align="center"
              width="100"
            />
            <el-table-column
              v-for="(item, index) in props.detailCols"
              :key="index"
              :label="item.label"
              :prop="item.prop"
              :min-width="item.width"
              show-overflow-tooltip
              :align="item.align"
              header-align="center"
            />
          </el-table>
        </div>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "QMSQDDETECTIONDATAMAINADDORUPDATE",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  descriptions: {
    type: Array,
    required: true,
  },
  detailCols: {
    type: Array,
    required: true,
  },
});

/** 弹窗显示 **/
const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
    setTimeout(() => {
      formRef.value.clearValidate();
    }, 50);
  }
);

/** formData定义表单数据 */
const formRef = ref(ElForm);
let formData = reactive({
  id: "",
  programId: "",
  programName: "",
  testNo: "",
  detectionEquipCode: "",
  processEquipCode: "",
  partCode: "",
  partBatch: "",
  processId: "",
  processCode: "",
  processName: "",
  detectionTime: "",
  partQrCode: "",
  detectionEvent: "",
  dfxDataIndex: "",
  result: "",
  dataKind: "",
  createTime: "",
  details: [
    {
      id: "",
      detectionResultId: "",
      programId: "",
      programName: "",
      detectionEquipCode: "",
      processEquipCode: "",
      partCode: "",
      paramCode: "",
      paramName: "",
      paramIndex: "",
      paramValue: "",
      paramValueStatus: "",
      paramResult: "",
      detectionTime: "",
      partQrCode: "",
      detectionEvent: "",
      createTime: "",
      dfxDataLineIndex: "",
    },
  ],
});
const details = {
  id: "",
  detectionResultId: "",
  programId: "",
  programName: "",
  detectionEquipCode: "",
  processEquipCode: "",
  partCode: "",
  paramCode: "",
  paramName: "",
  paramIndex: "",
  paramValue: "",
  paramValueStatus: "",
  paramResult: "",
  detectionTime: "",
  partQrCode: "",
  detectionEvent: "",
  createTime: "",
  dfxDataLineIndex: "",
};

/** 编辑时赋值 */
watch(
  () => props.data,
  (newVal: any) => {
    formData.id = "";
    if (newVal?.id) {
      Object.assign(formData, props.data);
      if (formData.id) {
        getdetails();
      }
    }
  }
);

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}

/** 重置表单 */
function resetForm() {
  formRef.value.resetFields();
  formRef.value.clearValidate();
  formData.details = [JSON.parse(JSON.stringify(details))];
  formData.id = "";
  formData.programId = "";
  formData.programName = "";
  formData.testNo = "";
  formData.detectionEquipCode = "";
  formData.processEquipCode = "";
  formData.partCode = "";
  formData.partBatch = "";
  formData.processId = "";
  formData.processCode = "";
  formData.processName = "";
  formData.detectionTime = "";
  formData.partQrCode = "";
  formData.detectionEvent = "";
  formData.dfxDataIndex = "";
  formData.result = "";
  formData.dataKind = "";
  formData.createTime = "";
}

const loading = ref(false);

async function getdetails() {
  let sondetails = await request({
    url: "/qms/qddetectiondatamain/getDetails",
    method: "post",
    data: formData,
  }).finally(() => {
    loading.value = false;
  });
  formData.details = sondetails.data;
}
</script>

<style lang="scss" scoped>
h4 {
  font-weight: 400;
  color: #000;
  padding-left: 10px;
  font-size: 14px;
  line-height: 14px;
}
.formTable {
  :deep(.el-form-item) {
    margin-right: 0 !important;
  }
}
:deep(.el-dialog .el-dialog__body) {
  overflow-y: auto;
  height: 65vh;
}
:deep(.search-container .el-input.el-input--default.el-input--suffix) {
  // 固定宽度
  width: 190px !important;
}
:deep(.search-container .el-form-item--default .el-form-item__label) {
  // 固定宽度
  justify-content: end;
}
:deep(.el-descriptions__label.el-descriptions__cell.is-bordered-label) {
  width: 16%;
}
:deep(.el-descriptions__content.el-descriptions__cell.is-bordered-content) {
  width: 16%;
}
</style>
